<template>
  <div>

    <!--搜索框部分-->
    <el-card>

      <el-form inline label-width="90px" size="mini" class="demo-form-inline">

        <el-form-item label="书名">
          <el-input placeholder="请输入内容" v-model.trim="searchBookParam.name" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item label="作者">
          <el-input placeholder="请输入作者" v-model.trim="searchBookParam.author" clearable size="mini"></el-input>
        </el-form-item>

        <el-form-item label="书籍类型">
          <el-select v-model="searchBookParam.typeId" placeholder="请选择书籍类型" clearable>
            <el-option
              v-for="item in bookType"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="评分">
          <el-select v-model="searchBookParam.grade" placeholder="请选择评价" clearable>
            <el-option label="☆ 浪费时间" :value="1"></el-option>
            <el-option label="☆☆ 勉强下咽" :value="2"></el-option>
            <el-option label="☆☆☆ 一般" :value="3"></el-option>
            <el-option label="☆☆☆☆ 优秀" :value="4"></el-option>
            <el-option label="☆☆☆☆☆ 优质" :value="5"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否追更">
          <el-select v-model="searchBookParam.continueSee" placeholder="请选择是否追更" clearable>
            <el-option label="已终止阅读" value="1"></el-option>
            <el-option label="继续追更" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="书籍进度">
          <el-select v-model="searchBookParam.writingProgress" placeholder="请选择书籍进度" clearable>
            <el-option label="404" value="1"></el-option>
            <el-option label="太监" value="2"></el-option>
            <el-option label="已完结" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="阅读进度">
          <el-select v-model="searchBookParam.speedOfProgress" placeholder="请选择阅读进度" clearable>
            <el-option label="计划中  (准备看)" value="1"></el-option>
            <el-option label="阅读中断(不会继续阅读)" value="2"></el-option>
            <el-option label="阅读暂停(停止阅读后续会继续阅读)" value="3"></el-option>
            <el-option label="阅读完成(完整的看完了整本书)" value="9"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" size="mini" @click="getBookListPageBefore">查询</el-button>
          <el-button type="warning" size="mini" @click="resetQueryBook">重置</el-button>
          <el-button type="warning" size="mini" @click="openSaveBook">新增</el-button>
        </el-form-item>

      </el-form>



    </el-card>


    <!--列表部分-->
    <el-card class="box-card">

      <div style="height: 590px; max-height: 590px;">

        <div v-if="bookList === undefined || bookList == null || bookList.length <= 0">
          <!--为空的时候展示图片-->
          <el-row>
            <el-col :span="24">
              <div style="display:flex; justify-content: center">
                <img src="@/assets/images/collect/bookNull.png" alt=""/>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div style="text-align:center; font-size:14px">
                <div>开卷有益,阅读的最大理由是想摆脱平庸，早一天就多一份人生的精彩；迟一天就多一天平庸的困扰。</div>
                <div>&nbsp;</div>
                <div>
                  《励学篇》 -宋真宗赵恒
                </div>
                <div>富家不用买良田，书中自有千钟粟。</div>
                <div>安居不用架高楼，书中自有黄金屋。</div>
                <div>出门莫恨无人随，书中车马多如簇。</div>
                <div>娶妻莫恨无良媒，书中自有颜如玉。</div>
                <div>男儿欲遂平生志，五经勤向窗前读。</div>
              </div>
            </el-col>
          </el-row>
        </div>

        <div v-else>
          <!--
            gutter	栅格间隔，属性来指定每一栏之间的间隔
            type	布局模式，可选 flex，现代浏览器下有效
          -->
          <el-row :gutter="10"  class="el-row">
            <!--span 栅格占据的列数,默认 24-->
            <el-col :span="6" v-for = "(book,index) in bookList" :key="book.id" class="el-col" >

              <!--一本书的样式-->
              <el-card :key="index" >

                <el-row>
                  <el-col :span="9">
                    <el-image v-if="book.icoPath != null"
                              class="bookImage"
                              fit="contain"
                              :src="book.icoPath"></el-image>
                    <el-image v-else
                              class="bookImage"
                              fit="contain"
                              :src="require('@/assets/images/collect/noCover.jpg')"></el-image>
                  </el-col>

                  <el-col :span="15">
                    <!--<div class="bookAuthor hand" style="font-weight: 600;" @click="toOpenBookDetailed(book)">{{book.name}}</div>-->
                    <!--<div class="bookAuthor bookAuthorColor">作者：{{book.author}}</div>-->
                    <!--<div class="bookAuthor bookAuthorColor">书籍类型：{{book.bookTypeName}}</div>-->
                    <div class="bookAuthor hand" style="font-weight: 600;" @click="toOpenBookDetailed(book)">{{book.name | ellipsis20}}</div>
                    <div class="bookAuthor bookAuthorColor">作者：{{book.author | ellipsis20}}</div>
                    <div class="bookAuthor bookAuthorColor">书籍类型：{{book.bookTypeName | ellipsis20}}</div>
                    <div class="bookAuthor bookAuthorColor">评分：</div>
                    <el-rate class="bookAuthor" disabled v-model="book.grade"></el-rate>
                  </el-col>
                </el-row>

                <el-row>
                  <!--<el-col :span="24">-->
                  <!--  <span class="bookAuthor">简介：</span>-->
                  <!--  <p class="briefIntroduction hand" @click="toOpenBookDetailed(book)">{{book.briefIntroduction | ellipsis60}}</p>-->
                  <!--</el-col>-->
                  <el-col :span="24">
                    <span class="bookAuthor">点评：</span>
                    <p class="briefIntroduction hand" @click="toOpenBookDetailed(book)">{{book.comment | ellipsis60}}</p>
                  </el-col>
                </el-row>

              </el-card>
            </el-col>

          </el-row>
        </div>

      </div>

      <!--分页部分-->
      <el-pagination
        style="width:33%; margin-right:10px; margin-top:10px;"
        background
        layout="total, prev, pager, next, jumper"
        @current-change="bookPageCurrentChange"
        :page-size="pageConfig.bookSize"
        :current-page="pageConfig.bookCurrent"
        :pager-count="5"
        :total="pageConfig.bookTotal">
      </el-pagination>
    </el-card>



    <!--书籍添加修改弹出框-->
    <BookSaveUpd ref="bookSaveUpd" @getBookListPage="getBookListPage"></BookSaveUpd>
    <BookDetailed ref="bookDetailed" @getBookListPage="getBookListPage" @openUpdBook="openUpdBook"></BookDetailed>

  </div>
</template>

<script>

  import BookSaveUpd from './BookSaveUpd.vue'
  import BookDetailed from './BookDetailed.vue'
  import http from '@/utils/http'
  import {clearInvalid} from "../../utils/utils";

  export default {
    name: "BookList",
    components:{
      BookSaveUpd,
      BookDetailed,
    },
    data(){
      return {
        // 分页参数
        pageConfig: {
          // 每页记录数
          bookSize: 8,
          // bookSize: 32,
          // 当前页码
          bookCurrent: 1,
          // 总记录数
          bookTotal: 0,
        },
        // 书籍查询参数
        searchBookParam: {
          name: null,
          author: null,
          writingProgress: null,
          speedOfProgress: null,
          grade: null,
          continueSee: null,
          typeId: null,
        },
        // 书籍类型
        bookType: [],
        // 书籍列表
        bookList: [],
      }
    },
    /**
     * 过滤器
     */
    filters: {
      /**
       * 数据超过长度显示省略号
       * @param value
       * @return {string|*}
       */
      ellipsis60(value) {
        if (!value) return "";
        if (value.length > 110) {
          return value.slice(0, 110) + "...";
        }
        return value;
      },
      /**
       * 数据超过长度显示省略号
       * @param value
       * @return {string|*}
       */
      ellipsis20(value) {
        if (!value) return "";
        if (value.length > 20) {
          return value.slice(0, 20) + "...";
        }
        return value;
      },
    },
    methods: {
      /**
       * 打开书籍添加弹出框
       */
      openSaveBook(){
        this.$refs.bookSaveUpd.openBookPage('save', null, this.bookType)
      },
      /**
       * 打开书籍添加弹出框
       */
      openUpdBook(book){
        this.$refs.bookSaveUpd.openBookPage('upd', book, this.bookType)
      },
      /**
       * 跳转打开书籍详情页面
       */
      toOpenBookDetailed(book){
        this.$refs.bookDetailed.openBookDetailed(book)
      },
      /**
       * 书籍分页被改变的时候
       * @param value 当前页
       */
      bookPageCurrentChange(value){
        this.pageConfig.bookCurrent = value
        this.getBookListPage()
      },
      /**
       * 获取书籍类型
       */
      getBookType(){
        http.post("/book/getBookType", {}).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }

          this.bookType = res.data

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 重置查询书籍参数
       */
      resetQueryBook(){
        this.searchBookParam = {
          name: null,
          author: null,
          writingProgress: null,
          speedOfProgress: null,
          grade: null,
          continueSee: null,
          typeId: null,
        }
      },
      /**
       * 查询前重置分页
       */
      getBookListPageBefore(){
        this.pageConfig.bookCurrent = 1
        this.getBookListPage()
      },
      /**
       * 分页查询书籍信息
       */
      getBookListPage(){
        http.post("/book/getBookListPage", {
          // 分页参数
          current: this.pageConfig.bookCurrent,
          size: this.pageConfig.bookSize,
          // 查询参数
          name: this.searchBookParam.name,
          author: this.searchBookParam.author,
          writingProgress: this.searchBookParam.writingProgress,
          speedOfProgress: this.searchBookParam.speedOfProgress,
          grade: this.searchBookParam.grade,
          continueSee: this.searchBookParam.continueSee,
          typeId: this.searchBookParam.typeId,
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            // 401是token过期跳转的
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          this.pageConfig.bookTotal = data.total;
          this.pageConfig.bookCurrent = data.current;
          this.pageConfig.bookSize = data.size;
          // 处理数据
          this.bookList = data.records

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
    mounted(){
      this.$store.commit('navigationListChange', ['我的收藏', '书籍'])
      this.getBookListPage()
      this.getBookType()
    },
  }
</script>

<style scoped>

  /*让card进行浮动*/
  .el-row {
    /*margin-bottom: 10px;*/
    display: flex;
    flex-wrap: wrap
  }

  /*简介*/
  .briefIntroduction{
    height: 42px;
    max-height: 42px;
  }

  /*card之间的高*/
  .el-col {
    border-radius: 4px;
    align-items: stretch;
    margin-bottom: 5px;
  }

  /*图片列表框*/
  .box-card {
    /*width: 100%;*/
    max-height: 660px;
    height: 660px;
    margin-top: 10px
  }

  /*书本图片样式*/
  .bookImage {
    width: 102px;
    height: 136px
  }

  /*书籍名称部分的样式*/
  .bookAuthor{
    width: 150px;
    /*width: 180px;*/
    margin-top: 12px;
    /*文字超长隐藏*/
    overflow:hidden;
  }

  /*书籍字体颜色*/
  .bookAuthorColor {
    color: #909399;
  }

  .hand{
    /*变手*/
    cursor:pointer;
  }

</style>
